.buildMain {
  min-height: calc(100vh - 22.5rem);

  .backImport {
    @apply h-5 flex items-center text-xl text-white-80 leading-5 mb-5 cursor-pointer w-fit;

    & > img {
      @apply w-5 h-5;
    }
  }

  .channelItem {
    @apply flex w-full rounded-lg pl-6 text-lg text-white items-center break-words cursor-pointer;
    height: 3.75rem;
    background-color: #262626;
    margin-bottom: 0.625rem;
    padding-right: 1.8125rem;

    &:hover {
      background-color: #313131;

      .img {
        background-color: #313131;
      }
    }

    .img {
      @apply h-full flex flex-col items-center justify-center bg-bg25;
      width: 6.625rem;

      & > img {
        @apply mb-1;
        width: 1.375rem;
        height: 1.375rem;
      }

      & > span {
        @apply text-sm text-white block text-center;
        width: 6.25rem;
        transform: scale(0.8333);
      }
    }

    .channelName {
      @apply flex-1 text-white-80 text-lg mx-10;
    }
  }
}

// 移动端排布
@media screen and (max-width: 767px) {
  .buildMain {
    @apply px-4;
    min-height: calc(100vh - 22.5rem);

    .backImport {
      @apply h-4 text-base leading-4;

      & > img {
        @apply w-4 h-4;
      }
    }

    .channelItem {
      @apply rounded pl-0;
      height: 3.125rem;

      .img {
        & > span {
          @apply text-xs w-fit;
        }
      }

      .channelName {
        @apply text-base;
      }
    }
  }
}
